<template>
    <div class="main">
        <arrow :topList="topList"></arrow>
        <main class="content">
            <div class="title_top">修改密码</div>
            <div class="card">
                <el-row type="flex">
                    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                        <el-col :span="24">
                            <el-form-item label="旧密码" prop="oldPassword">
                                <div style="width: 400px;">
                                    <el-input v-model="formData.oldPassword" show-password placeholder="请输入旧密码" clearable
                                        :style="{ width: '100%' }">
                                    </el-input>
                                </div>

                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="新密码" prop="password">
                                <div style="width: 400px;">
                                    <el-input v-model="formData.password" show-password placeholder="请输入新密码" clearable
                                        :style="{ width: '100%' }">
                                    </el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="确认密码" prop="repass">
                                <div style="width: 400px;">
                                    <el-input v-model="formData.repass" show-password placeholder="请输入确认密码" clearable
                                        :style="{ width: '100%' }">
                                    </el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <div class="btn_bottoms">
                                <div style=""><el-button plain size="medium" @click="cancel"> 取消修改 </el-button></div>
                                <div style="padding-left: 60px;"> <el-button type="primary" size="medium"
                                        @click="submitForm">
                                        确定修改 </el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
        </main>
    </div>
</template>

<script>
import arrow from '@/views/components/arrow'
export default {
    components: { arrow },
    data() {
        return {
            topList: {
                title: '流程指引',
                list: [
                    { name: '素材管理', img: 'gray' },
                    { name: '内容创作', img: 'gray' },
                    { name: '专家审核', img: 'gray' },
                    { name: '产品分发', img: 'gray' },
                    { name: '传播管理', img: 'gray' },
                ]
            },
            formData: {
                oldPassword: '',
                password: '',
                repass: '',
            },
            rules: {
                oldPassword: [{
                    required: true,
                    message: '请输入旧密码',
                    trigger: 'blur'
                },
                { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                ],
                password: [{
                    required: true,
                    message: '请输入新密码',
                    trigger: 'blur'
                },
                { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                ],
                repass: [{
                    required: true,
                    message: '请输入确认密码',
                    trigger: 'blur'
                },
                { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    created() { },
    methods: {
        submitForm() {
            if (this.password !== this.repass) {
                this.$message.info('两次输入的密码不一致')
                return
            }
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
                this.$message.success('点击确认修改')
            })
        },
        cancel() {
        this.$message.info('点击取消修改')
    }
    },
   
}


</script>

<style lang='scss' scoped>
.main {
    background-color: #f5f5f5;

    .content {
        background-color: white;
        margin-top: 10px;

        .title_top {
            padding: 30px 0 33px 32px;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            color: #3D3D3D;
            line-height: 21px;
        }

        .card {}

        .btn_bottoms {
            display: flex;
            padding-left: 130px;
            padding-top: 20px;
        }
    }
}
</style>